﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
			<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"/>	<title></title>
		<link rel="stylesheet" type="text/css" href="css/pyq1.css"/>
	</head>

	<body>
		<div id="big">
			<div id="top">
				<img id="top-img1" src="img/jiantou.png" />
				<span>返回</span> 朋友圈
				<img id="top-img2" src="img/xiangji.png" />
			</div>
			<div id="top2">
				<div id="top2-1">
					<span>取消</span>
					<label>发送</label>
				</div>
				<div id="top2-2" contenteditable="true">

				</div>
			</div>
			<div id="da">
				<img src="img/2 (2).jpg" />
				<img class="tx" src="img/7.jpg" />
				<span>
					你的名字
				</span>
			</div>
			<div id="db">
				<div class="xinxi">
					<div class="le">
						<img src="img/tx-1.jpg" />
					</div>
					<div class="ri">
						<p class="pa">可怜</p>
						<p class="pb">千与千寻</p>
						<div class="div-img1">
							<div class="div-1">
								<img class="img1" src="img/tx-2.jpg" />
							</div>
						</div>
						<div class="clear">

						</div>
						<div class="pc">
							<span>时间</span>
							<img id="imgc" src="img/c.png" />
							<div class="pc-a">
								<ul>
									<li>点赞</li>
									<li>评论</li>
								</ul>
							</div>
						</div>
						<div class="divab">
							<div class="diva">
								<img src="img/l.png" />
							</div>
							<div class="divb">
								<p><span>范特西</span>：<label>依然</label></p>
							</div>
						</div>
					</div>
				</div>
				<div class="xinxi">
					<div class="le">
						<img src="img/tx-1.jpg" />
					</div>
					<div class="ri">
						<p class="pa">你好呀</p>
						<p class="pb">千与千寻</p>
						<div class="div-img2">
							<div class="div-2">
								<img class="img2" src="img/tx-2.jpg" />
							</div>
							<div class="div-2">
								<img class="img2" src="img/tx-2.jpg" />
							</div>

						</div>
						<div class="clear">

						</div>
						<div class="pc"><span>时间</span><img src="img/c.png" /></div>
						<div class="divab">
							<div class="diva">
								<img src="img/l.png" />你好
							</div>
							<div class="divb">
								<p><span>范特西</span>：<label>依然</label></p>
							</div>
						</div>
					</div>
				</div>
				<div class="xinxi">
					<div class="le">
						<img src="img/tx-1.jpg" />
					</div>
					<div class="ri">
						<p class="pa">可怜</p>
						<p class="pb">千与千寻</p>
						<div class="div-img2">
							<img class="img2" src="img/tx-2.jpg" />
							<img class="img2" src="img/tx-2.jpg" />
							<img class="img2" src="img/tx-2.jpg" />
							<img class="img2" src="img/tx-2.jpg" />
						</div>
						<div class="pc"><span>时间</span><img src="img/c.png" /></div>
						<div class="divab">
							<div class="diva">
								<img src="img/l.png" />
								<label>你好</label>
							</div>
							<div class="divb">
								<p><span>范特西</span>：<label>依然</label></p>
							</div>
						</div>
					</div>
				</div>
				<div class="xinxi">
					<div class="le">
						<img src="img/tx-1.jpg" />
					</div>
					<div class="ri">
						<p class="pa">可怜</p>
						<p class="pb">千与千寻</p>
						<div class="div-img3">
							<div class="div-3">
								<img class="img3" src="img/tx-2.jpg" />
							</div>
							<div class="div-3">
								<img class="img3" src="img/tx-2.jpg" />
							</div>
							<div class="div-3">
								<img class="img3" src="img/tx-2.jpg" />
							</div>
							<div class="div-3">
								<img class="img3" src="img/tx-2.jpg" />
							</div>
							<div class="div-3">
								<img class="img3" src="img/tx-2.jpg" />
							</div>
							<div class="div-3">
								<img class="img3" src="img/tx-2.jpg" />
							</div>

						</div>
						<div class="clear">

						</div>
						<div class="pc"><span>时间</span><img src="img/c.png" /></div>
						<div class="divab">
							<div class="diva">
								<img src="img/l.png" />你好
							</div>
							<div class="divb">
								<p><span>范特西</span>：<label>依然</label></p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//点赞与评论-开始
			$("#imgc").click(function(){
				dianji(this);
			})
			
			function dianji(x){
				var $a=$(x).next();
				if($a.css("display")=="none"){
					$a.css("display","block");
				}else{
					$a.css("display","none");
				}
			}
				//点赞与评论-结束
				//点赞-开始
				$(".pc-a").find("li").first().click(function(){
					zan(this);
				})
				function zan(x){
					var $a=$(x).parent().parent();
					$a.parent().next().find(".diva").css("display","block");
					$a.css("display","none");
					if($a.parent().next().find(".diva").children().length>1){
					$a.parent().next().find(".diva").append("<span>，周杰伦</span>")
					}else{
						$a.parent().next().find(".diva").append("<span>周杰伦</span>")
					}
				}
				//点赞-结束
				//评论-开始
				$(".pc-a").find("li:last").click(function(){
					pinglun(this)
				})
				function pinglun(x){
					var $a=$(x).parent().parent();
					$a.parent().next().find(".divb").css("display","block");
					$a.css("display","none");
					var $p=$("<p><span>忐忑西</span>：<label>说点什么能</label></p>")
					$a.parent().next().find(".divb").prepend($p)
				}
				//评论-结束
				//点击相机-开始
			$("#top-img2").click(function() {
					$("#top").css("display", "none");
					$("#top2").css("display", "block");
				})
				//点击相机-结束
				//点击返回-开始
			$("#top2-1").find("span").click(function() {
					$("#top").css("display", "block");
					$("#top2").css("display", "none");
					$("#top2-2").html("")
				})
				//点击返回-开始
				//发送-开始
			$("#top2-1").find("label").click(function() {
					if($("#top2-2").html().trim() != "") {
						addxini();
						$("#top2").css("display","none");
						$("#top").css("display", "block");
					}
					$("#top2-2").html("")
				})
				//发送-结束
				//动态创建div开始
			function addxini() {
				var ta;
				var tb;
				var tc;
				var x = parseInt(Math.random() * 8 + 1)
				if(x == 1) {
					ta = "img1";
					tb = "div-img1"
					tc = "div-1"
				} else if(x == 2 || x == 4) {
					ta = "img2";
					tb = "div-img2";
					tc = "div-2";
				} else if(x == 3 || x > 4 && x <= 9) {
					ta = "img3";
					tb = "div-img3";
					tc = "div-3";
				}
				var $div = $("<div class='xinxi'><div class='le'><img src='img/tx-" + parseInt(Math.random() * 4 + 1) + ".jpg' /></div><div class='ri'><p class='pa'>大方</p><p class='pb'>" + $("#top2-2").html() + "</p><div class='" + tb + "'></div><div class='clear'></div><div class='pc'><span>刚刚</span><img onclick='dianji(this)' id='imgc' src='img/c.png'/><div class='pc-a'><ul><li onclick='zan(this)'>点赞</li><li onclick='pinglun(this)'>评论</li></ul></div></div><div class='divab'><div class='diva'><img src='img/l.png' /></div><div class='divb'></div></div></div></div>")
				for(var i = 0; i < x; i++) {
					var $img = $("<div class='" + tc + "'><img class='" + ta + "' src='img/tx-" + parseInt(Math.random() * 4 + 1) + ".jpg' /></div>");
					$(".pc-a").css("display", "block")
					$div.find("." + tb + "").append($img);
				}
				$("#db").prepend($div);
			}
			//动态创建div结束
		</script>
	</body>

</html>